<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box</title>
  </head>
  <body>
    <div
      id="box"
      style="
        background-color: red;
        width: 1px;
        height: 20px;
        color: antiquewhite;
      "
    ></div>
    <button>start</button>
    <script>
      let div = document.querySelector("#box");
      let button = document.querySelector("button");
      let startTime;
      function progress() {
        div.style.width = div.offsetWidth + 1 + "px";
        div.innerHTML = div.offsetWidth + "%";
        if (div.offsetWidth < 100) {
          startTime = Date.now();
          requestAnimationFrame(progress);
        }
      }
      button.onclick = function () {
        div.style.width = 0;
        startTime = Date.now();
        // 点击按钮时，调用一次
        requestAnimationFrame(progress);
      };
    </script>
  </body>
</html>
